<template>
  <div class="container">
    <el-row class="mb10">
      <el-col :span="16" align="left">
        <div class="flex">
          <el-input
            clearable
            v-model="data.params.kpiName"
            placeholder="业务名称"
            style="width: 120px; margin-right: 15px"
          >
          </el-input>
          <!-- {{ options.projectnameList }} -->
          <el-select clearable v-model="data.params.projectName" placeholder="所属项目">
            <el-option
              :label="el.project_name"
              :value="el.project_name"
              :key="k"
              v-for="(el, k) in options.projectnameList"
            />
          </el-select>
          <el-select clearable v-model="data.params.transYear" placeholder="请选择年度">
            <el-option
              :label="el"
              :value="el"
              :key="k"
              v-for="(el, k) in options.budgetYearlist"
            />
          </el-select>

        <div class="conUnitName">
          <el-cascader @change="changeUnit" popper-class="gy-cascader" :options="options.unitnameList"
            :props="data.popupTreeProps" v-model="data.params.unitName" :show-all-levels="false" placeholder="请选择所属单位"
            clearable>
            <template #default="{ data }">
              <el-tooltip
               :disabled="data.name.length < 13"
                class="item"
                effect="dark"
                :content="data.name"
                placement="bottom-start"
              >
                <span>{{ data.name }}</span>
              </el-tooltip>
            </template>
          </el-cascader>

        </div>

          <!-- <el-select clearable v-model="data.params.unitName" placeholder="所属单位">
            <el-option
              :label="el.belongingUnit"
              :value="el.belongingCode"
              :key="k"
              v-for="(el, k) in options.unitnameList"
            />
          </el-select> -->
          <el-button class="ordinary" @click="getListData" >搜索</el-button>
        </div>
      </el-col>
      <el-col :span="8" align="right">
        <el-button class="unlock" @click="getUnlock()" v-limit="'KJSL:KJYJ:ZYZHYJ:UNLOCK'">解锁</el-button>
        <el-button class="lock" @click="getLock()" v-limit="'KJSL:KJYJ:ZYZHYJ:LOCK'">锁定</el-button>
        <el-button class="ordinary" @click="getExport()" v-limit="'KJSL:KJYJ:ZYZHYJ:EXPERT'"> 批量导出 </el-button>
        <el-button type="danger" @click="deleteList()" v-limit="'KJSL:KJYJ:ZYZHYJ:DELETE'">批量删除</el-button>
        <el-button type="primary" @click="add" v-limit="'KJSL:KJYJ:ZYZHYJ:ADD'">新增</el-button>
      </el-col>
    </el-row>

    <div>
      <Table
        :loading="loading"
        :tableArr="data.allTableData"
        :pagination="data.page"
        :columns="data.columns"
        @currentChange="currentChange"
        @selectItem="getCurrentList"
        @sizeChange="sizeChange"
        @delectTable="delectIds"
        :total="data.page.total"
      >
        <template #operate="{ row }">
          <el-button
            size="small"
            class="ordinary"
            v-show="row.updateFlag"
            :disabled="row.lockflag == 1"
            @click="handleEdit(row)"
            >编辑</el-button
          >
          <el-button
            size="small"
            class="ordinary"
            :disabled="row.lockflag == 1"
            @click="handleDetail(row, 'detail')"
            >详情</el-button
          >
          <el-button
            size="small"
            type="primary"
            v-if="row.status == '待确认'"
            :disabled="row.lockflag == 1"
            @click="handleConfirm(row)"
            >确认</el-button
          >
        </template>
      </Table>
    </div>

    <el-dialog
      v-model="data.dialogVisible"
      @close="isSure = false"
      width="900px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <template #title>
        <div class="my-header">
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="基本信息" name="first">
              <Information
                ref="informationDom"
                :initData="data.initData"
                @closeFatherDialog="closeFatherDialog" :orgAllList="options.unitnameList"
              />
            </el-tab-pane>
            <el-tab-pane label="变更记录" name="fourth" v-if="data.addFlag == 1">
              <record :changeLogs="data.changeLogs"></record>
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.dialogVisible = false">关闭</el-button>
          <el-button v-if="!isDetail" type="primary" @click="sure">保存</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      v-model="monthVisible.isShow"
      width="60%"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <template #title>
        <div class="open-title">{{ ruleForm.budgetYear }}年-{{ ruleForm.belongingUnit }}</div>
      </template>
      <el-table :data="openTableData" style="width: 100%" border>
        <el-table-column prop="dataBasedMonth" label="月份" />
        <el-table-column prop="actualAmount" label="月度金额（万元）">
          <template #default="{ row }">
            <el-input
              v-model.number="row.actualAmount"
              v-if="row.isEdit"
              placeholder="请输入" :disabled="1"
            />
            <span v-else>{{ row.actualAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              v-if="!scope.row.isEdit"
              size="small"
              type="text"
              color="primary"
              @click="handleEditItem(scope.row)"
              v-limit="'KJSL:KJYJ:ZYZHYJ:EDIT'"
              >编辑</el-button
            >
            <el-button
            v-limit="'KJSL:KJYJ:ZYZHYJ:CONFIRM'"
              v-if="row.status == 0"
              size="small"
              type="primary"
              @click="handleConfirm(row)"
              >确认</el-button
            >
            <div v-else>
              <el-button size="small" type="text" color="#f40" @click="cancelItem(scope.row)"
                >取消</el-button
              >
              <el-button size="small" type="text" color="success" @click="saveItem(scope.row)"
                >保存</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="monthVisible.isShow = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import * as proxy from "@/constants/proxy"
import request from "@/utils/request"
import Api from '@/views/science/api/profess'
import Members from '@/views/science/components/members/members.vue'
import Membersxq from '@/views/science/components/members/membersxq.vue'
import Table from '@/views/science/components/table/table.vue'
import { Modals, tips } from '@/views/science/components/tips/tips'
import platformFiles from '@/views/science/technologyStrength/components/platformFiles/platformFiles.vue'
import platformFilesxq from '@/views/science/technologyStrength/components/platformFiles/platformFilesxq.vue'
import record from '@/views/science/technologyStrength/components/record/record.vue'
import { ObjectType } from 'typings/interfaces'
import { onMounted, reactive, ref } from 'vue'
import {
getConfirms,
getExportInnovativeTalentTeam,
getInnovativeTalentTeamLock,
getInnovativeTalentTeamUnlock,
getKgptKjslTchieveSttransDelete,
getProfessionalDetail,
monthReportInsert,
monthReportUpdate,
selectItemOpen,
} from '../../api/double'
import Information from './informatio.vue'
import Informationxq from './informatioxq.vue'

import { downloadFile } from '@/utils/utils'
import { ElMessage } from 'element-plus'
import moment from 'moment'
import {getProjectsDetail} from "@/views/science/api/international";
export default {
  components: {
    Table,
    platformFiles,
    platformFilesxq,
    record,
    Information,
    Informationxq,
    Members,
    Membersxq,
  },
  setup() {
    onMounted(() => {
      getOrgList();
    });
    let selectRows = reactive([]) //表格选中的行
    const activeName = ref('first')
    const budgetYear = ref('2023')
    let data = reactive({
      initData: {},
      dialogVisible: false,
      detail_loading:true,
      dialogType: '新增',
      addFlag: 0,
      members: [],
      changeLogs: [],
      baseInfo: [],
      memberList: [],

      popupTreeProps: {
        label: 'name',
        children: 'children',
        value: 'id',
        checkStrictly: true,
      },

      page: { page: 1, limit: 10, total: 4 },
      // 查询参数
      params: {
        kpiName: '',
        projectName: '',
        transYear: '',
        unitName: '',
        page: 1,
        pageSize: 10,
      },
      selectedRows: [] as any,
      columns: [
        {
          key: 'kpiName',
          width: 200,
          label: '业务名称',
        },
        {
          key: 'unitName',
          width: 200,
          label: '所属单位',
        },
        {
          key: 'projectName',
          width: 200,
          label: '所属项目',
        },
        {
          key: 'associateContract',
          width: 200,
          label: '所属合同',
        },

        {
          key: 'transAmount',
          width: 200,
          label: '转化金额（万元）',
        },
        {
          key: 'classTransName',
          width: 200,
          label: '转化类别',
        },
        {
          key: 'transYear',
          width: 200,
          label: '年度',
        },
        {
          key: 'status',
          width: 200,
          label: '状态',
          textColor: true,
        },
      ],
      ids: [],
      allTableData: [],
      detailVisible_loading:false,
      detailVisible: false,
    })
    //详情数据获取
    const detailVisibleData = async (id) => {
      data.detailVisible_loading = true
      let res = await getProjectsDetail(id)
      if (res.data.success) {
        // store.commit('technologyStrength/gettechnologyProjectsInfo', { ...res.data.data.info })
        // data.files = res.data.data.files
        data.changeLogs = res.data.data.changeLogs
        data.detailVisible_loading = false
      }else{
        data.detailVisible_loading = false
      }

    }
    let isDetail = ref<boolean>(false);
    const handleDetail = (row, type?: string) => {

        getProfessionalDetail({ id: row.id }).then((res) => {
          console.log('res', res.data.data)
          data.changeLogs = res.data.data.changeLogs
        })

        data.initData = row
        data.addFlag = 1
        data.dialogVisible = true
        data.dialogType = '编辑'
        num.value = row
        isDetail.value = type === 'detail';
        /*  ruleForm.budgetYear = row.budgetYear */
        // ruleForm.budgetAmount = +row.budgetAmount
        // ruleForm.belongingUnit = row.belongingUnit
        // ruleForm.competitionClass = row.competitionClass
        // ruleForm.className = row.className
        // ruleForm.name = row.name

    }

    let loading = ref(true)

    const selectIds = (a) => {
      data.ids = a
    }

    let handleConfirm = (row) => {
      console.log(row)
      Modals('是否确认当前流程', '提示', 'warning')
        .then(async () => {
          let res = await getConfirms(row.id)
          if (res.data.success) {
            getListData()
          }
        })
        .catch(() => {})
    }

    const sort = {
      orderBy: 'default',
      orderType: '',
    }
    let selectedRows: ObjectType[] = []
    let columns = [
      {
        type: 'kpiName',
        width: 140,
        label: '业务名称',
      },
      {
        type: 'unitName',
        width: 140,
        label: '所属单位',
      },
      {
        type: 'projectName',
        width: 140,
        label: '所属项目',
      },
      {
        type: 'associateContract',
        width: 140,
        label: '所属合同',
      },
      {
        type: 'transAmount',
        width: 140,
        label: '转化金额（万元）',
      },
      {
        type: 'classTransName',
        width: 140,
        label: '转化类别',
      },
      {
        type: 'transYear',
        width: 140,
        label: '年度',
      },
      {
        type: 'status',
        width: 140,
        label: '状态',
      },
    ]
    let num = ref({})

    // 单位

    let changeUnit = (val) => {
      if (val == null) {
        data.params.unitName = ''
        return false
      }
      if (val.length > 0) {
        let unitId = val[val.length - 1]
        data.params.unitName = unitId
      }
    }


    const ruleForm = reactive({
      projectId: '',
      unitId: '',
      associateContractId: '',
      kpiName: '',
      classTransId: '',
      transAmount: '',
      transYearId: '',
      classTransName: '',
    })
    const handleEdit = (row) => {
      if (row.lockflag == 1) {
        tips('该项已锁定，不可编辑', 'warning')
      } else {
        getProfessionalDetail({ id: row.id }).then((res) => {
          console.log('res', res.data.data)
          data.changeLogs = res.data.data.changeLogs
        })

        data.initData = row
        data.addFlag = 1
        data.dialogVisible = true
        data.dialogType = '编辑'
        num.value = row
        isDetail.value = false;
        /*  ruleForm.budgetYear = row.budgetYear */
        // ruleForm.budgetAmount = +row.budgetAmount
        // ruleForm.belongingUnit = row.belongingUnit
        // ruleForm.competitionClass = row.competitionClass
        // ruleForm.className = row.className
        // ruleForm.name = row.name
      }
    }

    // 新增
    const rules = reactive({
      budgetAmount: [
        { required: true, message: '请输入', trigger: 'blur' },
        { type: 'number', message: '请输入数字' },
      ],
      belongingUnit: [
        {
          required: true,
          message: '请选择',
          trigger: 'change',
        },
      ],
      className: [
        {
          required: true,
          message: '请选择',
          trigger: 'change',
        },
      ],
      competitionClass: [
        {
          required: true,
          message: '请选择',
          trigger: 'change',
        },
      ],
    })
    const informationDom = ref()
    const add = () => {
      /* ruleForm.budgetYear = '' */
      // ruleForm.budgetAmount = 0
      // ruleForm.belongingUnit = ''
      data.initData = {}
      data.dialogType = '新增'
      data.addFlag = 0
      data.dialogVisible = true
      isDetail.value = false;
    }
    const getCurrentList = (currentList) => {
      console.log(currentList, 'getCurrentList')
      data.selectedRows = currentList
    }
    const delectIds = (data) => {
      selectRows = data
      data.ids = data;
    }
    const ruleFormRef = ref()

    const sure = async () => {
      informationDom.value.submitForm().then((res) => {
        data.dialogVisible = false
        if (data.dialogType == '新增') {
          monthReportInsert({ ...res }).then((res) => {
            getListData() // 刷新表格数据
            data.dialogVisible = false
            ElMessage({
              message: '操作成功',
              type: 'success',
            })
          })
        } else if (data.dialogType == '编辑') {
          monthReportUpdate({ ...res }).then((res) => {
            getListData() // 刷新表格数据
            data.dialogVisible = false
            ElMessage({
              message: '操作成功',
              type: 'success',
            })
          })
        }
      })
    }
    const getFormData = (data) => {
      console.log('传递数据', data)
    }
    // 月度账单
    let monthVisible = reactive({ isShow: false })
    let openTableData = ref([])
    let cur = { belongingUnit: '', budgetYear: '' }
    const getOpenData = () => {
      selectItemOpen({
        belongingUnit: cur.belongingUnit,
        budgetYear: cur.budgetYear,
      }).then((res) => {
        openTableData.value = res.data.data
        console.log(openTableData, '+++', res)
      })
    }
    const openMonthTable = (row) => {
      cur = row
      monthVisible.isShow = true
      getOpenData()
    }

    const handleEditItem = (row) => {
      console.log(row)

      row.isEdit = true
    }
    const cancelItem = (row) => {
      row.isEdit = false
    }
    const saveItem = (row) => {
      monthReportUpdate({
        belongingUnit: row.belongingUnit,
        dataBasedMonth: row.dataBasedMonth,
        actualAmount: row.actualAmount,
        id: row.id,
      }).then(() => {
        getOpenData()
        ElMessage({
          message: '操作成功',
          type: 'success',
        })
      })
    }
    let changeList = ref([
      {
        name: '张三',
        changeTime: '2023-03-20',
        changeNode: '转换金额',
        changeBefore: '200',
        changeAfter: '100',
      },
      {
        name: '李四',
        changeTime: '2023-03-20',
        changeNode: '类别',
        changeBefore: '类别1',
        changeAfter: '类别2',
      },
    ])
    let isSure = ref(false)
    const sureCurrent = () => {
      isSure.value = true
      data.dialogVisible = true
    }

    interface Config {
      id: string
    }

    let selectArr: Config[] = reactive([])
    const handleSelectionChange = (val) => {
      selectArr = val
    }
    // 存储下拉框数组的对象
    let options = reactive({
      unitnameList: [],
      budgetYearlist: [] as any,
      projectnameList: [],
    })



    // 年份
    // Api.transyear().then((res) => {
    //   options.budgetYearlist = res.data.data
    // })

    // 单位
    // Api.unitname().then((res) => {
    //   options.unitnameList = res.data.data
    // })
    // 项目
    // Api.projectname().then((res) => {
    //   options.projectnameList = res.data.data
    // })

    let currentChange = (currentPage) => {
      data.params.page = currentPage
      console.log(currentPage)
      getListData()
    }
    const sizeChange = (size) => {
      console.log(size)
      data.params.pageSize = size
      getListData()
    }
    // 列表获取
    let allTableData = ref([])
    // const page = {
    //   page: 1,
    //   pageSize: 10,
    //   total: 0,
    // }

    let getOrgList = () => {
      return request({
        url: proxy.CHECC_API_CMS + "/org/getSysOrgList",
        method: "get",
      }).then(res => {
       options.unitnameList = res.data.data
      })
    }
    let getListData = () => {
      selectArr = []
      loading.value = true
      Api.getTotalList(data.params)
        .then((res) => {
          //console.log('获取数据列表', res.data.data)
          let resData = res.data.data
          resData.records.map((item) => {
            if (item.status == 0) {
              item.status = '待确认'
            } else {
              item.status = '已确认'
            }
          })
          data.allTableData = resData.records
          data.page.total = resData.total
        })
        .finally(() => {
          loading.value = false
        })

        Api.projectname().then((res) => {
          options.projectnameList = res.data.data
        })
    }
    getListData()

    //锁定
    const getLock = async () => {
      if (selectRows.length !== 1) {
        tips('请选择一项进行操作', 'warning')
      } else {
        let flag = true
        console.log(data.selectedRows, 'selectedRows')
        data.selectedRows.forEach((obj) => {
          if (obj.status == "待确认") {
            flag = false
          }
        })
        if (!flag) {
          ElMessage({
            message: '请确认后再进行锁定',
            type: 'warning',
          })
          return
        }
        let id = (selectRows as any)[0]
        let row = data.allTableData.filter((item: any) => {
          return item.id === id
        })
        if ((row as any)[0].lockflag == 1) {
          tips('该项已锁定', 'warning')
        } else {
          Modals('是否锁定选择内容', '提示', 'warning')
            .then(async () => {
              let res = await getInnovativeTalentTeamLock(id)
              if (res.data.success) {
                tips('锁定成功', 'success')
                getListData()
              } else {
                tips(res.data.msg, 'warning')
              }
            })
            .catch(() => {
              console.log('点击了取消')
            })
        }
      }
    }
    const getUnlock = async () => {
      if (selectRows.length !== 1) {
        tips('请选择一项进行操作', 'warning')
      } else {
        Modals('是否解锁选择内容', '提示', 'warning')
          .then(async () => {
            let res = await getInnovativeTalentTeamUnlock(selectRows[0])
            if (res.data.success) {
              tips('解锁成功', 'success')
              getListData()
            } else {
              tips(res.data.msg, 'warning')
            }
          })
          .catch(() => {
            console.log('点击了取消')
          })
      }
    }

    const calculaTime = () => {
      // 获取当前年份
      const currentYear: number = new Date().getFullYear()

      // 构建年份数组
      const years: number[] = []

      // 获取前三年的年份
      for (let i: number = 3; i >= 1; i--) {
        years.push(currentYear - i)
      }

      // 获取当前年份
      years.push(currentYear)

      // 获取后三年的年份
      for (let i: number = 1; i <= 8; i++) {
        years.push(currentYear + i)
      }
      console.log('年份',years);
      options.budgetYearlist = years
    }

    const getExport = async () => {

            let flag: Array<number> = []
            selectRows.forEach((item) => {
              data.allTableData.forEach((item2: any) => {
                if (item == item2.id) {
                  if (item2.lockflag == 1) {
                    flag.push(1)
                  } else {
                    flag.push(0)
                  }
                }
              })
            })


      let msg = '是否导出全部数据'
      if(selectRows.length>0){
        msg = '是否导出所选数据'
      }
      Modals(msg, "提示", "warning")
          .then(async () => {
            let tupm ;
            if(selectRows.length==0){
               tupm = []
            }else {
              //str.join(',')
               tupm = selectRows;
            }
            const params = {
              ...data.params,
              ids: tupm


            }
          await getExportInnovativeTalentTeam(params)
        })
        .then((res) => {
          const name = `专业转化业绩_${moment().valueOf()}.xlsx`
          const url = URL.createObjectURL(res.data)
          downloadFile(url, name)
        })
        .finally(() => {
          loading.value = false
        })
        .catch(() => {
          console.log('点击了取消')
        })
    }

    const getDelect = async () => {
      if (data.ids.length) {
        Modals('是否删除选择内容', '提示', 'warning')
          .then(async () => {
            let arr = JSON.parse(JSON.stringify(data.ids))
            let res = await getKgptKjslTchieveSttransDelete(arr + '')
            if (res.data.success) {
              tips('删除成功', 'success')
              getListData()
            }
          })
          .catch(() => {
            console.log('点击了取消')
          })
      } else {
        tips('请选择', 'warning')
      }
    }
    const closeFatherDialog = () => {
      data.dialogVisible = false
    }

    //批量删除
    let deleteList = async () => {
      if (selectRows.length <= 0) {
        tips('至少选择一项进行操作', 'warning')
      } else {
        let flag: Array<number> = []
        selectRows.forEach((item) => {
          data.allTableData.forEach((item2: any) => {
            if (item == item2.id) {
              if (item2.lockflag == 1) {
                flag.push(1)
              } else {
                flag.push(0)
              }
            }
          })
        })
        if (flag.indexOf(1) >= 0) {
          tips('包含锁定项，不能删除', 'warning')
        } else {
          Modals('是否删除选择内容', '提示', 'warning')
            .then(async () => {
              let str = selectRows.join(',')
              const res = await Api.deleteList({ id: str })
              if (res.data.success) {
                tips('删除成功', 'success')
                getListData()
              } else {
                tips(res.data.msg, 'warning')
              }
            })
            .catch(() => {
              console.log('点击了取消')
            })
        }
      }
      // if (!selectArr.length)
      //   return ElMessage({
      //     message: '请选择',
      //     type: 'warning',
      //   })
      // Api.deleteList({id: selectArr.map((el) => {return el.id }).join(','),
      // }).then((res) => {
      //   ElMessage({
      //     message: res.data.data.msg,
      //     type: 'success',
      //   })
      //   getListData()
      // })
    }
    getListData()
    calculaTime()
    return {
      currentChange,
      sizeChange,
      deleteList,
      getCurrentList,
      delectIds,
      selectIds,
      closeFatherDialog,
      informationDom,
      sureCurrent,
      changeList,
      isSure,

      activeName,
      budgetYear,
      options,
      data,
      selectedRows,
      columns,
      handleEdit,
      changeUnit,
      // 列表
      getListData,
      handleSelectionChange,
      // 新增
      add,
      sure,
      ruleForm,
      rules,
      ruleFormRef,
      getDelect,
      getLock,
      handleConfirm,
      getUnlock,
      getExport,
      selectArr,
      loading,
      monthVisible,
      openMonthTable,
      openTableData,
      handleEditItem,
      cancelItem,
      saveItem,
      calculaTime,
      getOrgList,
      handleDetail,
      isDetail
    }
  },
}
</script>

<style lang="scss" >
.conUnitName {
  display: inline-block;
  width: 200px;

}

.gy-cascader {
  .el-cascader-node {
    max-width: 250px;
  }
}
</style>

<style lang="scss" scoped>
.container {
  background-color: white;
  padding: 20px;
}

.el-col {
  line-height: 40px;
}

.el-form-item {
  .el-input {
    width: 100px;
    background-color: aliceblue;
  }

  .el-select {
    width: 100px;
  }
}

.custom-color {
  color: red !important;
  /* 确保优先级高于其他样式 */
}

.el-table th {
  background-color: #f0f0f0;
  /* 修改表头背景色 */
  color: #333;
  /* 修改表头文字颜色 */
}

:deep .el_table_box {
  overflow-x: auto !important;
  scrollbar-width: none;
  overflow-x: auto;
}

/* .demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
} */
.table-container {
  overflow-x: auto;
}

.open-title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

/deep/.el-dialog__body {
  display: block !important;
}

.mt15 {
  margin-top: 15px;
}

.mb10 {
  margin-bottom: 10px;
}

.tc {
  text-align: center;
}

.align-center {
  align-items: center;
}

.space-between {
  justify-content: space-between;
}

.mt20 {
  margin-top: 20px;
}



.dialog-footer {
  display: flex;
  justify-content: end;
}

:deep(.el-dialog__body) {
  display: none;
}

// 滚动条
:deep(.demo-tabs > .el-tabs__content) {
  max-height: 500px;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
</style>

